<!-- 使用 Editor 组件 -->
<template>
  <div>
    <Editor ref="editor"/>
    <!-- <el-button @click="preview">112</el-button>
    <el-button @click="toStop">112</el-button> 
    <el-button @click="toPublic">发布</el-button>-->
    <div>  
  </div>  
  </div>
</template>

<script>
import Editor from './components/initEditor.vue';

export default {
  name: 'EditProduceIntroduction',
  components: {
    Editor,
    // Table
  },
  data(){
    return{
      ed:''
    }
  },
  methods:{
    preview(){
      this.ed.toPreview();
    },
    toStop(){
      this.ed.toStopPreview();
    },
    toPublic(){
      // 导出html内容测试
      const {html,css} = this.ed.getHTMLText();
      const tmpl =
                `<!DOCTYPE html>
            <html>
                <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                </head>
                ${html}
                <style>
                    ${css}
                </style>
            </html>`;
      const file = new File([tmpl], 'test.html', {type: 'text/html'});
      const formData = new FormData();
      formData.append('file', file);
      this.$axios.post("http://localhost:8085/upload/toUpload", formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => {
            if (response) {
              console.log(response.data.data)
                window.open(response.data.data);
            }else{
                throw new Error('上传失败');
            }
        });
    }
  },
  mounted(){
      this.ed = this.$refs.editor;
      // const uploadFile = (file) => {
      //   const formData = new FormData();
      //   formData.append('file', file);

      //   return this.$axios.post("http://localhost:8085/upload/toUpload", formData, {
      //       headers: {
      //           'Content-Type': 'multipart/form-data'
      //       }
      //   })
      //   .then(response => {
      //       if (response) {
      //           return response.data.data;
      //       }else{
      //           throw new Error('上传失败');
      //       }
      //   });
      // }
      // this.ed.setUploadConfig(uploadFile);
      // this.ed.setVideoUploadCommands(uploadFile);

      // this.ed.setVideoUploadCommands("测试1");
      // this.ed.uploadFile("");
      // console.log(this.ed.editor.Blocks.get('video-player-block'))
      // let that = this;
      // setTimeout(function (){
      //     that.ed.toPreview();
      //   },100);
      
    // 导入html文本测试
    // ed.importByHTMLText(`<body><div id="comp1">Page 2</div></body><style>* {box-sizing: border-box;}
    // body {margin: 0;}#comp1{color:red;}</style>`);

    // 导入html远端路径测试
    // ed.importByHTMLPath('http://localhost:8081/html/switch.html');

    // 导出html内容测试
    // const {html,css} = ed.getHTMLText();
    // console.log('html:',html);
    // console.log('css:',css);
    // 之后可以做其他处理

    // 缓存设置测试
    // ed.setStore(false);//参数表示是否开启缓存
  }
};
</script>
<style scoped>  
.floating-button {  
  position: fixed;  
  bottom: 20px;  
  right: 20px; 
  width: 40px;
  height: 40px;
  border: none;    
  background-color: #007bff;
  color: white;   
  cursor: pointer;   
  font-size: 13px;  
  outline: none; 
  z-index: 1000;  
  border-radius: 20px;
  filter: opacity(0.5);
}  
  
.floating-button:hover {  
  filter: opacity(1); 
}  
</style>
